import  { useState, useEffect } from 'react';
import { loadModules } from '@esri/react-arcgis';

const MyWebTileLayer = (props) => {
    const [myWebTileLayer, setMyWebTileLayer] = useState(null);
    useEffect(() => {
        loadModules(['esri/layers/WebTileLayer']).then(([WebTileLayer]) => {
            const myWebTileLayer = new WebTileLayer({
                urlTemplate: props.webTileLayerProperties.url
            });

            setMyWebTileLayer(myWebTileLayer);
            props.map.add(myWebTileLayer);
        }).catch((err) => console.error(err));

        return function cleanup() {
            props.map.remove(myWebTileLayer);
        }
    }, [ props ]);

    return null;
}
export default MyWebTileLayer;

/**
 * 使用帮助:
 * <MyWebTileLayer webTileLayerProperties={{ url: 'https://stamen-tiles-a.a.ssl.fastly.net/terrain/{level}/{col}/{row}.png'}} />
 */